<template>
  <div class="root_view_css">
    <img v-if="pageData" class="bg_img" :focusable="false" :src="IMG_URL + pageData.bgImageUrl">
  </div>
</template>

<script lang="ts">
import { useGlobalApi } from "../../api/UseApi"
import { defineComponent } from '@vue/runtime-core'
import { ref } from "vue";
import {
  ESKeyCode,
  ESKeyEvent,
  ESLogLevel,
  useESEventBus,
  useESLog,
  useESToast
} from '@extscreen/es3-core'
import { useESRouter } from '@extscreen/es3-router'
import BuildConfig from '../../build/BuildConfig'
import { Native } from "@extscreen/es3-vue";


export default defineComponent({
  name: 'template',
  components: {
  },
  setup() {
    const router = useESRouter()
    const toast = useESToast()
    const globalApi = useGlobalApi()
    const IMG_URL = BuildConfig.imgUrl

    const pageData = ref()
    let focusId = ref('')

    // 生命周期 页面创建
    const onESCreate = (params) => {
      console.log("params", params);
      toast.showToast('params >>> ' + params.id)
      getPageData(params.id)
    }

    async function getPageData(id) {
      const uid = await localStorage.getString('userId', '')
      globalApi.getAlbumListById({
        cid: BuildConfig.cid,
        userId: uid,
        pageNum: 1,
        pageSize: 10,
        albumId: id
      }).then(res => {
        console.log("专辑信息 >>>", res);
        pageData.value = res.data
      })
    }

    function onFocus(e) {
      let eleName = e.target.attributes.name
      focusId.value = eleName
    }

    function onClick(e) {
      let eleName = e.target.attributes.name
      focusId.value = eleName
    }

    function onKeyUp(keyEvent): boolean {
      switch (keyEvent.keyCode) {
        case 67:
          // Native.callUIFunction(left_item_ref__0.value, 'requestFocus', []);
          // 返回首页
          router.go(-1)
          break
      }
      return true
    }

    return {
      onESCreate,
      IMG_URL,

      onFocus,
      onClick,
      onKeyUp,

      focusId,
      pageData,
    }
  }
})
</script>

<style scoped>
.root_view_css {
  width: 1920px;
  height: 1080px;
  background-color: transparent;
}

.bg_img {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
